import React from 'react'
import './Scrollbar.scss'
import BScroll from '@better-scroll/core'
import MouseWheel from '@better-scroll/mouse-wheel'
import ScrollBar from '@better-scroll/scroll-bar'
BScroll.use(MouseWheel)
BScroll.use(ScrollBar)

class Scrollbar extends React.Component {
    constructor(props) {
        super(props)
        this.scroll = React.createRef()
        this.scrollObj = {}
    }

    componentDidMount() {
        this.initScroll()
    }
    initScroll() {
        const node = this.scroll.current;
        this.scrollObj = new BScroll(node, {  
            mouseWheel: true,
            scrollY: true,
            scrollbar: true
         })
    }
    
    render() {
        return (
            <div className='scrollbar'>
                <div ref={ this.scroll } style={{ marginBottom: '-17px', marginRight: '-17px' }} className='scrollbar-wrapper scrollbar_wrap'>
                    <div  className='scroll-content'>
                        { this.props.children }
                    </div>
                </div> 
            </div>   
        )
    }
}

export default Scrollbar